import React, { useState, useRef } from 'react';
import { ProCard } from '@ant-design/pro-components';
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import {
  ProTable,
  TableDropdown,
  StatisticCard,
} from '@ant-design/pro-components';
import {
  Button,
  Dropdown,
  Menu,
  Space,
  Tag,
  Divider,
  Modal,
  Badge,
} from 'antd';
import request from 'umi-request';
import { PageContainer } from '@ant-design/pro-layout';
import NewStuPlan from './component/NewStuPlan';
import StudentList from './component/StudentList';
import TaskList from './component/TaskList';
import WeekPlan from './component/WeekPlan';
import TrainingPlan from './component/TrainingPlan';

export default () => {
  const [tabKey, setTabKey] = useState('所带学生列表');

  return (
    <PageContainer
      tabList={[
        {
          tab: '所带学生列表',
          key: '所带学生列表',
        },
        {
          tab: (
            <Badge size="small">
              <span style={{ fontSize: 16 }}>学生提交的计划</span>
            </Badge>
          ),
          key: '学生提交的计划',
        },
        {
          tab: '任务列表',
          key: '任务列表',
        },
        {
          tab: '周计划列表',
          key: '周计划列表',
        },
        {
          tab: '培养计划内容',
          key: '培养计划内容',
        },
      ]}
      onTabChange={(key: any) => {
        setTabKey(key);
      }}
    >
      {tabKey === '所带学生列表' ? <StudentList /> : null}
      {tabKey === '学生提交的计划' ? <NewStuPlan /> : null}
      {tabKey === '任务列表' ? <TaskList /> : null}
      {tabKey === '周计划列表' ? <WeekPlan /> : null}
      {tabKey === '培养计划内容' ? <TrainingPlan /> : null}
    </PageContainer>
  );
};
